/**
 * 系列产品 业务组件 下拉列表结构
 
 */
import React from 'react';
import PropTypes from 'prop-types';
import { Row, Col, Input, Form } from 'antd';
import { SeriesProductsC } from '../..';
import { FormItemLayout } from '../../form/formPub';

class SeriesProductGroupC extends React.PureComponent {
  // props默认值
  static defaultProps = {
    title: '系列产品',
    placeholder: '请选择系列产品',
    helper: '',
    initialValue: undefined, // 默认无初始化值
    onChange: () => {},
    onRef: () => {}, // 本组件的引用
    width: '100%',
    rules: undefined, // 默认无校验规则
    formItemLayout: FormItemLayout, // 设置表单默认布局
    allowClear: true, // 默认可删除
    disabled: false, // 默认不禁用
    multiple: false, // 默认单选
    maxTagCount: 0, // 默认多选时，最多选择1条
    direction: 'row', // 横向还是纵向
  };

  constructor(props) {
    super(props);

    this.state = {
      seriesName: undefined, // 系列产品name
    };
  }

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef(this);
  }

  // 非初始化状态下更改下拉选项(供父组件调用)
  setSelect = (value) => {
    this.state.SeriesProductsC.setSelect(value);
  };

  // 系列产品切换事件
  onChange = (e) => {
    this.props.onChange(e);
    if (e) {
      // 修改系列产品名称
      // 多选模式
      if (this.props.multiple) {
        const arr = [];
        e.forEach((element) => {
          if (element) {
            const str = element.title.split('-')[1];
            arr.push(str);
          }
        });
        this.setState({
          seriesName: arr.join(','),
        });
      } else {
        // 单选模式
        this.setState({
          seriesName: e.title.split('-')[1],
        });
      }
    } else {
      this.setState({
        seriesName: undefined,
      });
    }
  };

  render() {
    const {
      labalWrap,
      labelWrapTwo,
      direction,
      form,
      title,
      dataIndex,
      initialValue,
      placeholder,
      helper,
      width,
      rules,
      formItemLayout,
      allowClear,
      disabled,
      multiple,
      maxTagCount,
    } = this.props;
    return (
      <Row style={{ width }}>
        <Col span={direction === 'row' ? 12 : 24}>
          <SeriesProductsC
            form={form}
            labalWrap={labalWrap}
            dataIndex={dataIndex}
            initialValue={initialValue}
            title={title ? (Array.isArray(title) ? title[0] : title) : '系列产品'}
            placeholder={placeholder}
            helper={helper}
            onChange={this.onChange}
            multiple={multiple}
            allowClear={allowClear}
            rules={rules}
            formItemLayout={formItemLayout}
            disabled={disabled}
            maxTagCount={maxTagCount}
            onRef={(ref) => this.setState({ SeriesProductsC: ref })}
          />
        </Col>
        <Col span={direction === 'row' ? 12 : 24}>
          <Form.Item colon={false} className={labelWrapTwo ? 'labalWrap' : ''} {...formItemLayout} label={<span>{title && Array.isArray(title) ? title[1] : '系列产品名称'}</span>}>
            <Input disabled={true} value={this.state.seriesName} />
          </Form.Item>
        </Col>
      </Row>
    );
  }
}

// props类型
SeriesProductGroupC.propsTypes = {
  form: PropTypes.object, // form对象
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.string, // Form识别的Item ID
  initialValue: PropTypes.string, // 初始默认值
  placeholder: PropTypes.string, // 占位符
  onChange: PropTypes.func, // 输入框内容变化时的回调
  helper: PropTypes.oneOfType([
    // 提示帮助信息
    PropTypes.string,
    PropTypes.element,
  ]),
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  rules: PropTypes.object, // 校验规则
  formItemLayout: PropTypes.object, // 设置表单布局
  allowClear: PropTypes.bool, // 设置是否可删除
  disabled: PropTypes.bool, // 是否禁用
  multiple: PropTypes.bool, // 是否支持多选
  maxTagCount: PropTypes.number, // 多选时，做多显示多少条
  direction: PropTypes.string, // 横向排列还是纵向
};

export default SeriesProductGroupC;
